<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title></title>
		<!-- 引入VUE -->
        <script src="./js/vue.js"></script>
	</head>
	<body>
		<div id="root">
			<h2>人员列表</h2>
			<!-- 遍历数组 -->
			<input type="text" v-model="keyWord" placeholder="请输入名字">
			<button @click="sortType = 1">年龄升序</button>
			<button @click="sortType = 2">年龄降序</button>
			<button @click="sortType = 0">原顺序</button>
			<ul>
				<li v-for="(item,index) in fullList" :key='item.id'>
					{{item.name}}-{{item.age}}-{{index}}-{{item.sex}}
					<input type="text">
				</li>
			</ul>
		</div>
		<script type="text/javascript">
			Vue.config.productionTip = false;// 阻止vue在启动时生成生产提示
			const vm = new Vue({
				el:"#root",
				data:{
					keyWord:'',
					sortType:0,
					persons:[
						{id:'001',name:'周冬雨',age:30,sex:'女'},
						{id:'002',name:'周杰伦',age:19,sex:'男'},
						{id:'003',name:'温兆伦',age:20,sex:'男'},
						{id:'004',name:'马冬梅',age:40,sex:'女'}
					]
				},
				computed: {
					fullList(){
						// 过滤完的数据
						const arr = this.persons.filter((item) =>{
							return item.name.indexOf(this.keyWord) !== -1
						})
						if(this.sortType){
							arr.sort((a,b)=>{
								return this.sortType === 1 ? a.age - b.age : b.age - a.age;
							})
						}
						return arr;
					}
				}
			})
		</script>
	</body>
</html>